<template>
  <div class="device-page">
    <div class="nav-bar" style="background: #FFFFFF">
      <div class="nav-status" :style="{height:statusH + 'px'}"></div>
      <div class="nav-head flex-center" :style="{height:titleH + 'px'}">
        <div class="flex-row-v-center" style="padding-left: 10px; width: 40px">
          <img style="width: 22px;height: 22px" src="/static/assets/img/icon/icon-arrow-left.png"
               @click="onClickGoBack()"/>
        </div>
        <div class="flex-1 flex-center">
          <span style="font-size: 18px; color:#000000">我的物联网设备</span>
        </div>
        <div style="width: 40px"></div>
      </div>
    </div>
    <div class="device-container flex-center" :style="{'padding-top':titleH + statusH + 'px'}">
      <div class="empty-div flex-col-v-center" :style="{'margin-top': -(titleH + statusH) + 'px'}">
        <img src="/static/assets/img/empty-device.png" class="empty-img"/>
        <label class="empty-text">暂无物联网设备</label>
        <div class="btn flex-center" @click="onClickFuncing">添加</div>
      </div>

    </div>
  </div>
</template>

<script>
  import global from 'global'
  import Core from 'core'
  import Common from 'common'

  export default {
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH
      }
    },

    methods: {
      onClickGoBack () {
        Core.Util.goBack()
      },

      onClickFuncing () {
        Common.funcing();
      },
    }
  }
</script>

<style lang="scss" scoped>
  .device-page {
    background: #f9f9f9;
    height: 100%;

 .device-container {
   height: 100%;
   .empty-div {
     margin-top: -10%;
   }
   .empty-img  {
     width: 172px;
     height: 120px;
     margin-bottom: 10px;
   }
   .empty-text {
     margin-bottom: 20px;
     color: #939393;
     font-size: 16px;
   }
   .btn {
       border-radius: 35px;
       background: #0EC5A9;
       width: 115px;
       height: 35px;
       color: #ffffff;
     }


 }

    .bg-white {
      background: white;
    }


  }
</style>
